<html>
<head>
<title>main.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #000000;}
.s1 { color: #0000ff; font-weight: bold;}
.s2 { color: #000000;}
.s3 { color: #000080; font-weight: bold;}
.s4 { color: #008000; font-weight: bold;}
.s5 { color: #808080; font-style: italic;}
.s6 { color: #000080; font-weight: bold;}
.s7 { color: #0000ff; font-weight: bold;}
.s8 { color: #008000; font-weight: bold;}
.s9 { color: #0000ff;}
.ln { color: #999999; font-weight: normal; font-style: normal; }
</style>
</head>
<body bgcolor="#ffffff">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#c0c0c0" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
main.html</font>
</center></td></tr></table>
<pre><a name="l1"><span class="ln">1    </span></a>&lt;!DOCTYPE <span class="s1">html</span>&gt;
<a name="l2"><span class="ln">2    </span></a>&lt;<span class="s3">html  </span><span class="s1">lang=</span><span class="s4">&quot;zh&quot; </span><span class="s1">xmlns:th=</span><span class="s4">&quot;http://www.thymeleaf.org&quot;</span>&gt;
<a name="l3"><span class="ln">3    </span></a>&lt;<span class="s3">head</span>&gt;
<a name="l4"><span class="ln">4    </span></a>	&lt;<span class="s3">meta </span><span class="s1">charset=</span><span class="s4">&quot;utf-8&quot;</span>&gt;
<a name="l5"><span class="ln">5    </span></a>	&lt;<span class="s3">meta </span><span class="s1">name=</span><span class="s4">&quot;viewport&quot; </span><span class="s1">content=</span><span class="s4">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;
<a name="l6"><span class="ln">6    </span></a>	<span class="s5">&lt;!--360浏览器优先以webkit内核解析--&gt;</span>
<a name="l7"><span class="ln">7    </span></a>	&lt;<span class="s3">title</span>&gt;&lt;/<span class="s3">title</span>&gt;
<a name="l8"><span class="ln">8    </span></a>	&lt;<span class="s3">link </span><span class="s1">rel=</span><span class="s4">&quot;shortcut icon&quot; </span><span class="s1">href=</span><span class="s4">&quot;favicon.ico&quot;</span>&gt;
<a name="l9"><span class="ln">9    </span></a>	&lt;<span class="s3">link </span><span class="s1">href=</span><span class="s4">&quot;../static/css/bootstrap.min.css&quot; </span><span class="s1">th:href=</span><span class="s4">&quot;@{/css/bootstrap.min.css}&quot; </span><span class="s1">rel=</span><span class="s4">&quot;stylesheet&quot;</span>/&gt;
<a name="l10"><span class="ln">10   </span></a>	&lt;<span class="s3">link </span><span class="s1">href=</span><span class="s4">&quot;../static/css/font-awesome.min.css&quot; </span><span class="s1">th:href=</span><span class="s4">&quot;@{/css/font-awesome.min.css}&quot; </span><span class="s1">rel=</span><span class="s4">&quot;stylesheet&quot;</span>/&gt;
<a name="l11"><span class="ln">11   </span></a>	&lt;<span class="s3">link </span><span class="s1">href=</span><span class="s4">&quot;../static/css/main/animate.min.css&quot; </span><span class="s1">th:href=</span><span class="s4">&quot;@{/css/main/animate.min.css}&quot; </span><span class="s1">rel=</span><span class="s4">&quot;stylesheet&quot;</span>/&gt;
<a name="l12"><span class="ln">12   </span></a>	&lt;<span class="s3">link </span><span class="s1">href=</span><span class="s4">&quot;../static/css/main/style.min862f.css&quot; </span><span class="s1">th:href=</span><span class="s4">&quot;@{/css/main/style.min862f.css}&quot; </span><span class="s1">rel=</span><span class="s4">&quot;stylesheet&quot;</span>/&gt;
<a name="l13"><span class="ln">13   </span></a>&lt;/<span class="s3">head</span>&gt;
<a name="l14"><span class="ln">14   </span></a>&lt;<span class="s3">style</span>&gt;
<a name="l15"><span class="ln">15   </span></a>	<span class="s6">body</span>,<span class="s6">div</span>,<span class="s6">p</span>{ <span class="s7">font-family</span>: <span class="s8">'Microsoft Yahei' </span>;<span class="s7">font-size</span>: <span class="s9">14</span><span class="s8">px</span>;}
<a name="l16"><span class="ln">16   </span></a>	.<span class="s6">box</span>{ <span class="s7">width</span>: <span class="s9">400</span><span class="s8">px</span>; <span class="s7">height</span>: <span class="s9">400</span><span class="s8">px</span>;<span class="s7">margin</span>:<span class="s9">100</span><span class="s8">px auto</span>; <span class="s7">border-radius</span>: <span class="s9">50</span>%;<span class="s7">position</span>: <span class="s8">relative</span>;}
<a name="l17"><span class="ln">17   </span></a>	<span class="s5">/*原点*/</span>
<a name="l18"><span class="ln">18   </span></a>	.<span class="s6">origin</span>{ <span class="s7">width</span>: <span class="s9">20</span><span class="s8">px</span>; <span class="s7">height</span>: <span class="s9">20</span><span class="s8">px</span>; <span class="s7">border-radius</span>: <span class="s9">50</span>%; <span class="s7">background</span>: <span class="s6">#ff0000</span>; <span class="s7">top</span>:<span class="s9">190</span><span class="s8">px</span>; <span class="s7">left</span>: <span class="s9">190</span><span class="s8">px</span>; <span class="s7">position</span>: <span class="s8">absolute</span>;}
<a name="l19"><span class="ln">19   </span></a>	<span class="s5">/* 指针 */</span>
<a name="l20"><span class="ln">20   </span></a>	.<span class="s6">clock_line</span>{ <span class="s7">position</span>: <span class="s8">absolute</span>;<span class="s7">position</span>:<span class="s8">absolute</span>;<span class="s7">z-index</span>:<span class="s9">20</span>;}
<a name="l21"><span class="ln">21   </span></a>	.<span class="s6">hour_line</span>{<span class="s7">width</span>:<span class="s9">100</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">4</span><span class="s8">px</span>;<span class="s7">top</span>:<span class="s9">198</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">200</span><span class="s8">px</span>;<span class="s7">background-color</span>:<span class="s6">#000</span>;<span class="s7">border-radius</span>:<span class="s9">2</span><span class="s8">px</span>;
<a name="l22"><span class="ln">22   </span></a>		<span class="s7">transform-origin</span>:<span class="s9">0 50</span>%;<span class="s7">box-shadow</span>:<span class="s9">1</span><span class="s8">px </span>-<span class="s9">3</span><span class="s8">px </span><span class="s9">8</span><span class="s8">px </span><span class="s9">3</span><span class="s8">px </span><span class="s6">#aaa</span>;}
<a name="l23"><span class="ln">23   </span></a>	.<span class="s6">minute_line</span>{<span class="s7">width</span>:<span class="s9">130</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">2</span><span class="s8">px</span>;<span class="s7">top</span>:<span class="s9">199</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">190</span><span class="s8">px</span>;<span class="s7">background-color</span>:<span class="s6">#000</span>;
<a name="l24"><span class="ln">24   </span></a>		<span class="s7">transform-origin</span>:<span class="s9">7.692</span>% <span class="s9">50</span>%;<span class="s7">box-shadow</span>:<span class="s9">1</span><span class="s8">px </span>-<span class="s9">3</span><span class="s8">px </span><span class="s9">8</span><span class="s8">px </span><span class="s9">1</span><span class="s8">px </span><span class="s6">#aaa</span>;}
<a name="l25"><span class="ln">25   </span></a>	.<span class="s6">second_line</span>{<span class="s7">width</span>:<span class="s9">170</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">1</span><span class="s8">px</span>;<span class="s7">top</span>:<span class="s9">199.5</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">180</span><span class="s8">px</span>;<span class="s7">background-color</span>:<span class="s6">#f60</span>;
<a name="l26"><span class="ln">26   </span></a>		<span class="s7">transform-origin</span>:<span class="s9">11.765</span>% <span class="s9">50</span>%;<span class="s7">box-shadow</span>:<span class="s9">1</span><span class="s8">px </span>-<span class="s9">3</span><span class="s8">px </span><span class="s9">7</span><span class="s8">px </span><span class="s9">1</span><span class="s8">px </span><span class="s6">#bbb</span>;}
<a name="l27"><span class="ln">27   </span></a>
<a name="l28"><span class="ln">28   </span></a>	.<span class="s6">dot_box</span>{<span class="s7">width</span>: <span class="s8">inherit</span>; <span class="s7">height</span>: <span class="s8">inherit</span>;}
<a name="l29"><span class="ln">29   </span></a>	<span class="s5">/*时钟数*/</span>
<a name="l30"><span class="ln">30   </span></a>	.<span class="s6">dot</span>{ <span class="s7">width</span>: <span class="s9">40</span><span class="s8">px</span>; <span class="s7">height</span>: <span class="s9">40</span><span class="s8">px</span>; <span class="s7">line-height</span>: <span class="s9">40</span><span class="s8">px</span>; <span class="s7">text-align</span>: <span class="s8">center</span>; <span class="s7">font-size</span>: <span class="s9">22</span><span class="s8">px</span>; <span class="s7">position</span>: <span class="s8">absolute</span>;}
<a name="l31"><span class="ln">31   </span></a>	.<span class="s6">clock-scale</span>{<span class="s7">width</span>:<span class="s9">195</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">2</span><span class="s8">px</span>;<span class="s7">transform-origin</span>:<span class="s9">0</span>% <span class="s9">50</span>%;<span class="s7">z-index</span>:<span class="s9">7</span>;
<a name="l32"><span class="ln">32   </span></a>		<span class="s7">position</span>:<span class="s8">absolute</span>;<span class="s7">top</span>:<span class="s9">199</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">200</span><span class="s8">px</span>;}
<a name="l33"><span class="ln">33   </span></a>	.<span class="s6">scale-show</span>{ <span class="s7">width</span>:<span class="s9">12</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">2</span><span class="s8">px</span>;<span class="s7">background-color</span>:<span class="s6">#555</span>;<span class="s7">float</span>:<span class="s8">left</span>;}
<a name="l34"><span class="ln">34   </span></a>	.<span class="s6">scale-hidden</span>{<span class="s7">width</span>:<span class="s9">183</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">2</span><span class="s8">px</span>;<span class="s7">float</span>:<span class="s8">left</span>;}
<a name="l35"><span class="ln">35   </span></a>	<span class="s5">/*日期*/</span>
<a name="l36"><span class="ln">36   </span></a>	.<span class="s6">date_info</span>{<span class="s7">width</span>:<span class="s9">160</span><span class="s8">px</span>;<span class="s7">height</span>:<span class="s9">28</span><span class="s8">px</span>;
<a name="l37"><span class="ln">37   </span></a>		<span class="s7">line-height</span>:<span class="s9">28</span><span class="s8">px</span>;<span class="s7">text-align</span>:<span class="s8">center</span>;<span class="s7">position</span>:<span class="s8">absolute</span>;<span class="s7">top</span>:<span class="s9">230</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">120</span><span class="s8">px</span>;<span class="s7">z-index</span>:<span class="s9">11</span>;<span class="s7">color</span>:<span class="s6">#555</span>;
<a name="l38"><span class="ln">38   </span></a>		<span class="s7">font-weight</span>:<span class="s8">bold</span>;}
<a name="l39"><span class="ln">39   </span></a>	.<span class="s6">time_info</span>{ <span class="s7">width</span>: <span class="s9">110</span><span class="s8">px</span>; <span class="s7">height</span>: <span class="s9">35</span><span class="s8">px</span>; <span class="s7">line-height</span>: <span class="s9">35</span><span class="s8">px</span>;<span class="s7">text-align</span>:<span class="s8">center</span>;<span class="s7">position</span>:<span class="s8">absolute</span>;<span class="s7">top</span>:<span class="s9">270</span><span class="s8">px</span>;<span class="s7">left</span>:<span class="s9">150</span><span class="s8">px</span>;<span class="s7">z-index</span>:<span class="s9">11</span>;<span class="s7">color</span>:<span class="s6">#555</span>; <span class="s7">background</span>: <span class="s6">#253e3e</span>; }
<a name="l40"><span class="ln">40   </span></a>	.<span class="s6">time</span>{ <span class="s7">width</span>: <span class="s9">35</span><span class="s8">px </span>;<span class="s7">height</span>:<span class="s9">35</span><span class="s8">px</span>; <span class="s7">float</span>: <span class="s8">left</span>; <span class="s7">color</span>: <span class="s6">#fff</span>; <span class="s7">font-size</span>: <span class="s9">22</span><span class="s8">px</span>;}
<a name="l41"><span class="ln">41   </span></a>	<span class="s6">#minute_time</span>{<span class="s7">border-left</span>:<span class="s9">1</span><span class="s8">px solid </span><span class="s6">#fff</span>;<span class="s7">border-right</span>:<span class="s9">1</span><span class="s8">px solid </span><span class="s6">#fff</span>;}
<a name="l42"><span class="ln">42   </span></a>&lt;/<span class="s3">style</span>&gt;
<a name="l43"><span class="ln">43   </span></a>&lt;<span class="s3">body </span><span class="s1">class=</span><span class="s4">&quot;gray-bg&quot;</span>&gt;
<a name="l44"><span class="ln">44   </span></a>&lt;<span class="s3">script </span><span class="s1">th:src=</span><span class="s4">&quot;@{/js/jquery.min.js}&quot;</span>&gt;&lt;/<span class="s3">script</span>&gt;
<a name="l45"><span class="ln">45   </span></a>&lt;<span class="s3">script </span><span class="s1">th:src=</span><span class="s4">&quot;@{/js/bootstrap.min.js}&quot;</span>&gt;&lt;/<span class="s3">script</span>&gt;
<a name="l46"><span class="ln">46   </span></a>&lt;<span class="s3">script </span><span class="s1">th:src=</span><span class="s4">&quot;@{/ajax/libs/layer/layer.min.js}&quot;</span>&gt;&lt;/<span class="s3">script</span>&gt;
<a name="l47"><span class="ln">47   </span></a>&lt;<span class="s3">h1 </span><span class="s1">th:align=</span><span class="s4">&quot;center&quot; </span><span class="s1">th:text=</span><span class="s4">&quot;安徽海王国安医药有限公司后台信息系统&quot;</span>&gt;&lt;/<span class="s3">h1</span>&gt;
<a name="l48"><span class="ln">48   </span></a>&lt;<span class="s3">h3 </span><span class="s1">th:align=</span><span class="s4">&quot;center&quot; </span><span class="s1">id=</span><span class="s4">&quot;times&quot;</span>&gt;&lt;/<span class="s3">h3</span>&gt;
<a name="l49"><span class="ln">49   </span></a>&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;box&quot; </span><span class="s1">id=</span><span class="s4">&quot;clock&quot;</span>&gt;
<a name="l50"><span class="ln">50   </span></a>	<span class="s5">&lt;!-- 原点 --&gt;</span>
<a name="l51"><span class="ln">51   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;origin&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l52"><span class="ln">52   </span></a>	<span class="s5">&lt;!-- 时钟数 --&gt;</span>
<a name="l53"><span class="ln">53   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot_box&quot;</span>&gt;
<a name="l54"><span class="ln">54   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;6&lt;/<span class="s3">div</span>&gt;
<a name="l55"><span class="ln">55   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;5&lt;/<span class="s3">div</span>&gt;
<a name="l56"><span class="ln">56   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;4&lt;/<span class="s3">div</span>&gt;
<a name="l57"><span class="ln">57   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;3&lt;/<span class="s3">div</span>&gt;
<a name="l58"><span class="ln">58   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;2&lt;/<span class="s3">div</span>&gt;
<a name="l59"><span class="ln">59   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;1&lt;/<span class="s3">div</span>&gt;
<a name="l60"><span class="ln">60   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;12&lt;/<span class="s3">div</span>&gt;
<a name="l61"><span class="ln">61   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;11&lt;/<span class="s3">div</span>&gt;
<a name="l62"><span class="ln">62   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;10&lt;/<span class="s3">div</span>&gt;
<a name="l63"><span class="ln">63   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;9&lt;/<span class="s3">div</span>&gt;
<a name="l64"><span class="ln">64   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;8&lt;/<span class="s3">div</span>&gt;
<a name="l65"><span class="ln">65   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;dot&quot;</span>&gt;7&lt;/<span class="s3">div</span>&gt;
<a name="l66"><span class="ln">66   </span></a>	&lt;/<span class="s3">div</span>&gt;
<a name="l67"><span class="ln">67   </span></a>	<span class="s5">&lt;!-- 时、分、秒针 --&gt;</span>
<a name="l68"><span class="ln">68   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;clock_line hour_line&quot; </span><span class="s1">id=</span><span class="s4">&quot;hour_line&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l69"><span class="ln">69   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;clock_line minute_line&quot; </span><span class="s1">id=</span><span class="s4">&quot;minute_line&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l70"><span class="ln">70   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;clock_line second_line&quot; </span><span class="s1">id=</span><span class="s4">&quot;second_line&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l71"><span class="ln">71   </span></a>	<span class="s5">&lt;!-- 日期 --&gt;</span>
<a name="l72"><span class="ln">72   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;date_info&quot; </span><span class="s1">id=</span><span class="s4">&quot;date_info&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l73"><span class="ln">73   </span></a>	<span class="s5">&lt;!-- 时间 --&gt;</span>
<a name="l74"><span class="ln">74   </span></a>	&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;time_info&quot; </span>&gt;
<a name="l75"><span class="ln">75   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;time&quot; </span><span class="s1">id=</span><span class="s4">&quot;hour_time&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l76"><span class="ln">76   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;time&quot; </span><span class="s1">id=</span><span class="s4">&quot;minute_time&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l77"><span class="ln">77   </span></a>		&lt;<span class="s3">div </span><span class="s1">class=</span><span class="s4">&quot;time&quot; </span><span class="s1">id=</span><span class="s4">&quot;second_time&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l78"><span class="ln">78   </span></a>	&lt;/<span class="s3">div</span>&gt;
<a name="l79"><span class="ln">79   </span></a>&lt;/<span class="s3">div</span>&gt;
<a name="l80"><span class="ln">80   </span></a>&lt;<span class="s3">script </span><span class="s1">type=</span><span class="s4">&quot;text/javascript&quot;</span>&gt;
<a name="l81"><span class="ln">81   </span></a>	<span class="s6">var </span>times=document.getElementById(<span class="s8">&quot;times&quot;</span>)
<a name="l82"><span class="ln">82   </span></a>	<span class="s6">function </span>sz(){
<a name="l83"><span class="ln">83   </span></a>		t=setInterval(<span class="s6">function</span>(){
<a name="l84"><span class="ln">84   </span></a>			<span class="s5">//获取时间对象</span>
<a name="l85"><span class="ln">85   </span></a>			<span class="s6">var </span>dd=<span class="s6">new </span>Date();
<a name="l86"><span class="ln">86   </span></a>			<span class="s5">//获取年月日，时分秒</span>
<a name="l87"><span class="ln">87   </span></a>			<span class="s6">var </span>y=dd.getFullYear();
<a name="l88"><span class="ln">88   </span></a>			<span class="s6">var </span>m=dd.getMonth()+<span class="s9">1</span>;
<a name="l89"><span class="ln">89   </span></a>			<span class="s6">var </span>d=dd.getDate();
<a name="l90"><span class="ln">90   </span></a>			<span class="s6">var </span>h=dd.getHours();
<a name="l91"><span class="ln">91   </span></a>			<span class="s6">var </span>i=dd.getMinutes();
<a name="l92"><span class="ln">92   </span></a>			<span class="s6">var </span>s=dd.getSeconds();
<a name="l93"><span class="ln">93   </span></a>			<span class="s6">var </span>wkday = dd.getDay();
<a name="l94"><span class="ln">94   </span></a>			<span class="s6">if </span>(m &lt; <span class="s9">10</span>) m = <span class="s8">&quot;0&quot; </span>+ m;
<a name="l95"><span class="ln">95   </span></a>			<span class="s6">if </span>(d &lt; <span class="s9">10</span>) d = <span class="s8">&quot;0&quot; </span>+ d;
<a name="l96"><span class="ln">96   </span></a>			<span class="s6">if </span>(h &lt; <span class="s9">10</span>) h = <span class="s8">&quot;0&quot; </span>+ h;
<a name="l97"><span class="ln">97   </span></a>			<span class="s6">if </span>(i &lt; <span class="s9">10</span>) i = <span class="s8">&quot;0&quot; </span>+ i;
<a name="l98"><span class="ln">98   </span></a>			<span class="s6">if </span>(s &lt; <span class="s9">10</span>) s = <span class="s8">&quot;0&quot; </span>+ s;
<a name="l99"><span class="ln">99   </span></a>			times.innerHTML=y+<span class="s8">&quot;年&quot;</span>+m+<span class="s8">&quot;月&quot;</span>+d+<span class="s8">&quot;日&quot;</span>+<span class="s8">&quot;   &quot;</span>+h+<span class="s8">&quot;:&quot;</span>+i+<span class="s8">&quot;:&quot;</span>+s+<span class="s8">&quot; &quot;</span>+<span class="s8">&quot;星期&quot;</span>+<span class="s8">&quot;日一二三四五六&quot;</span>.charAt(wkday);
<a name="l100"><span class="ln">100  </span></a>		},<span class="s9">1000</span>)
<a name="l101"><span class="ln">101  </span></a>	}
<a name="l102"><span class="ln">102  </span></a>	sz()
<a name="l103"><span class="ln">103  </span></a>&lt;/<span class="s3">script</span>&gt;
<a name="l104"><span class="ln">104  </span></a>
<a name="l105"><span class="ln">105  </span></a>&lt;<span class="s3">script </span><span class="s1">th:src=</span><span class="s4">&quot;@{/js/jquery.min.js}&quot;</span>&gt;&lt;/<span class="s3">script</span>&gt;
<a name="l106"><span class="ln">106  </span></a>&lt;<span class="s3">script</span>&gt;
<a name="l107"><span class="ln">107  </span></a>	$(<span class="s6">function</span>(){
<a name="l108"><span class="ln">108  </span></a>		<span class="s6">var </span>clock = document.getElementById(<span class="s8">&quot;clock&quot;</span>);
<a name="l109"><span class="ln">109  </span></a>		<span class="s6">function </span>initNumXY(){
<a name="l110"><span class="ln">110  </span></a>			<span class="s5">// 1、12个数字的位置设置</span>
<a name="l111"><span class="ln">111  </span></a>			<span class="s6">var </span>radius = <span class="s9">160</span>;<span class="s5">//大圆半价</span>
<a name="l112"><span class="ln">112  </span></a>			<span class="s6">var </span>dot_num = <span class="s9">360</span>/$(<span class="s8">&quot;.dot&quot;</span>).length;<span class="s5">//每个div对应的弧度数</span>
<a name="l113"><span class="ln">113  </span></a>			//每一个dot对应的弧度;
<a name="l114"><span class="ln">114  </span></a>			<span class="s6">var </span>ahd = dot_num*Math.PI/<span class="s9">180</span>;
<a name="l115"><span class="ln">115  </span></a>			$(<span class="s8">&quot;.dot&quot;</span>).each(<span class="s6">function</span>(index, el) {
<a name="l116"><span class="ln">116  </span></a>				$(<span class="s6">this</span>).css({
<a name="l117"><span class="ln">117  </span></a>					<span class="s8">&quot;left&quot;</span>:<span class="s9">180</span>+Math.sin((ahd*index))*radius,
<a name="l118"><span class="ln">118  </span></a>					<span class="s8">&quot;top&quot;</span>:<span class="s9">180</span>+Math.cos((ahd*index))*radius
<a name="l119"><span class="ln">119  </span></a>				});
<a name="l120"><span class="ln">120  </span></a>			});
<a name="l121"><span class="ln">121  </span></a>			<span class="s5">// 2、刻钟设置</span>
<a name="l122"><span class="ln">122  </span></a>			<span class="s6">for</span>(<span class="s6">var </span>i = <span class="s9">0</span>; i &lt; <span class="s9">60</span>; i++) {
<a name="l123"><span class="ln">123  </span></a>				clock.innerHTML += <span class="s8">&quot;&lt;div class='clock-scale'&gt; &quot; </span>+
<a name="l124"><span class="ln">124  </span></a>						<span class="s8">&quot;&lt;div class='scale-hidden'&gt;&lt;/div&gt;&quot; </span>+
<a name="l125"><span class="ln">125  </span></a>						<span class="s8">&quot;&lt;div class='scale-show'&gt;&lt;/div&gt;&quot; </span>+
<a name="l126"><span class="ln">126  </span></a>						<span class="s8">&quot;&lt;/div&gt;&quot;</span>;
<a name="l127"><span class="ln">127  </span></a>			}
<a name="l128"><span class="ln">128  </span></a>			<span class="s6">var </span>scale = document.getElementsByClassName(<span class="s8">&quot;clock-scale&quot;</span>);
<a name="l129"><span class="ln">129  </span></a>			<span class="s6">for</span>(<span class="s6">var </span>i = <span class="s9">0</span>; i &lt; scale.length; i++) {
<a name="l130"><span class="ln">130  </span></a>				scale[i].style.transform=<span class="s8">&quot;rotate(&quot; </span>+ (i * <span class="s9">6 </span>- <span class="s9">90</span>) + <span class="s8">&quot;deg)&quot;</span>;
<a name="l131"><span class="ln">131  </span></a>			}
<a name="l132"><span class="ln">132  </span></a>		}
<a name="l133"><span class="ln">133  </span></a>		initNumXY();<span class="s5">//调用上面的函数</span>
<a name="l134"><span class="ln">134  </span></a>		//获取时钟id
<a name="l135"><span class="ln">135  </span></a>		<span class="s6">var </span>hour_line = document.getElementById(<span class="s8">&quot;hour_line&quot;</span>),
<a name="l136"><span class="ln">136  </span></a>				minute_line = document.getElementById(<span class="s8">&quot;minute_line&quot;</span>),
<a name="l137"><span class="ln">137  </span></a>				second_line = document.getElementById(<span class="s8">&quot;second_line&quot;</span>),
<a name="l138"><span class="ln">138  </span></a>				date_info=document.getElementById(<span class="s8">&quot;date_info&quot;</span>),<span class="s5">//获取date_info</span>
<a name="l139"><span class="ln">139  </span></a>				hour_time = document.getElementById(<span class="s8">&quot;hour_time&quot;</span>),<span class="s5">// 获去时间id</span>
<a name="l140"><span class="ln">140  </span></a>				minute_time = document.getElementById(<span class="s8">&quot;minute_time&quot;</span>),
<a name="l141"><span class="ln">141  </span></a>				second_time = document.getElementById(<span class="s8">&quot;second_time&quot;</span>);
<a name="l142"><span class="ln">142  </span></a>		<span class="s5">//3、设置动态时间</span>
<a name="l143"><span class="ln">143  </span></a>		<span class="s6">function </span>setTime(){
<a name="l144"><span class="ln">144  </span></a>			<span class="s6">var </span>nowdate = <span class="s6">new </span>Date();
<a name="l145"><span class="ln">145  </span></a>			<span class="s5">//获取年月日时分秒</span>
<a name="l146"><span class="ln">146  </span></a>			<span class="s6">var </span>year = nowdate.getFullYear(),
<a name="l147"><span class="ln">147  </span></a>					month = nowdate.getMonth()+<span class="s9">1</span>,
<a name="l148"><span class="ln">148  </span></a>					day = nowdate.getDay(),
<a name="l149"><span class="ln">149  </span></a>					hours = nowdate.getHours(),
<a name="l150"><span class="ln">150  </span></a>					minutes = nowdate.getMinutes(),
<a name="l151"><span class="ln">151  </span></a>					seconds = nowdate.getSeconds(),
<a name="l152"><span class="ln">152  </span></a>					date = nowdate.getDate();
<a name="l153"><span class="ln">153  </span></a>			<span class="s6">var </span>weekday =[<span class="s8">&quot;星期日&quot;</span>,<span class="s8">&quot;星期一&quot;</span>,<span class="s8">&quot;星期二&quot;</span>,<span class="s8">&quot;星期三&quot;</span>,<span class="s8">&quot;星期四&quot;</span>,<span class="s8">&quot;星期五&quot;</span>,<span class="s8">&quot;星期六&quot;</span>];
<a name="l154"><span class="ln">154  </span></a>			<span class="s5">// 获取日期id</span>
<a name="l155"><span class="ln">155  </span></a>			date_info.innerHTML=year+<span class="s8">&quot;年&quot;</span>+month+<span class="s8">&quot;月&quot;</span>+date+<span class="s8">&quot;日   &quot;</span>+weekday[day];
<a name="l156"><span class="ln">156  </span></a>			hour_time.innerHTML = hours &gt;=<span class="s9">10 </span>? hours : <span class="s8">&quot;0&quot;</span>+hours;
<a name="l157"><span class="ln">157  </span></a>			minute_time.innerHTML = minutes &gt;=<span class="s9">10 </span>? minutes : <span class="s8">&quot;0&quot;</span>+minutes;
<a name="l158"><span class="ln">158  </span></a>			second_time.innerHTML = seconds &gt;=<span class="s9">10 </span>? seconds : <span class="s8">&quot;0&quot;</span>+seconds;
<a name="l159"><span class="ln">159  </span></a>			console.log(year+<span class="s8">&quot;年&quot;</span>+month+<span class="s8">&quot;月&quot;</span>+date+<span class="s8">&quot;日   &quot;</span>+weekday[day]);
<a name="l160"><span class="ln">160  </span></a>			<span class="s5">//时分秒针设置</span>
<a name="l161"><span class="ln">161  </span></a>			<span class="s6">var </span>hour_rotate = (hours*<span class="s9">30</span>-<span class="s9">90</span>) + (Math.floor(minutes / <span class="s9">12</span>) * <span class="s9">6</span>);
<a name="l162"><span class="ln">162  </span></a>			hour_line.style.transform = <span class="s8">'rotate(' </span>+ hour_rotate + <span class="s8">'deg)'</span>;
<a name="l163"><span class="ln">163  </span></a>			minute_line.style.transform = <span class="s8">'rotate(' </span>+ (minutes*<span class="s9">6 </span>- <span class="s9">90</span>) + <span class="s8">'deg)'</span>;
<a name="l164"><span class="ln">164  </span></a>			second_line.style.transform = <span class="s8">'rotate(' </span>+ (seconds*<span class="s9">6 </span>- <span class="s9">90</span>)+<span class="s8">'deg)'</span>;
<a name="l165"><span class="ln">165  </span></a>		}
<a name="l166"><span class="ln">166  </span></a>		<span class="s5">// setTime();</span>
<a name="l167"><span class="ln">167  </span></a>		setInterval(setTime, <span class="s9">1000</span>);
<a name="l168"><span class="ln">168  </span></a>
<a name="l169"><span class="ln">169  </span></a>
<a name="l170"><span class="ln">170  </span></a>	});
<a name="l171"><span class="ln">171  </span></a>&lt;/<span class="s3">script</span>&gt;
<a name="l172"><span class="ln">172  </span></a>&lt;<span class="s3">div </span><span class="s1">style=</span><span class="s4">&quot;</span><span class="s7">text-align</span>:<span class="s8">center</span>;<span class="s7">margin</span>:<span class="s9">50</span><span class="s8">px </span><span class="s9">0</span>; <span class="s7">font</span>:<span class="s8">normal </span><span class="s9">14</span><span class="s8">px</span>/<span class="s9">24</span><span class="s8">px 'MicroSoft YaHei'</span>;<span class="s4">&quot;</span>&gt;&lt;/<span class="s3">div</span>&gt;
<a name="l173"><span class="ln">173  </span></a>&lt;/<span class="s3">body</span>&gt;
<a name="l174"><span class="ln">174  </span></a>&lt;/<span class="s3">html</span>&gt;
<a name="l175"><span class="ln">175  </span></a></pre>
</body>
</html>